<template>
	<view class="main_container">
		<view style="z-index: -2;">
			<image style="width: 100%;height:30%;position:fixed;top: 0;left: 0;" src="http://113.142.144.25:9301/statics/appimg/user_center_bg.png"></image>
		</view>
		<view style="height: 100%;width: 100%; z-index: 1;">
			<view style="background-color: #fff;">
				<orderTabBar :tabList="tabList" @clickTabBar="clickTabBar" class="tab-bar" :show-line="true" />
			</view>
			<scroll-view class="member_lsit" scroll-y="true" :style="'height:100%'" enable-flex @scrolltolower="scrollToLower()">
				<view v-show="item.serverName" class="video_item" v-for="(item,index) in memberList" :key="index">
					<view class="video_content">
						<view style="width: 100%; margin-top :20rpx;">
							<text style="float: left;" class="video_title">{{item.serverName}}</text>
							<text v-if="item.status == '0'" style="float: right;color: coral; margin-right: 50rpx;margin-top: 15rpx;">进行中</text>
							<text v-else style="float: right;color: coral; margin-right: 50rpx;margin-top: 15rpx;" >{{statusList[item.status].dictLabel}}</text>
						</view>
						<view class="devideline"></view>
						<view style="width: 100%; float:left; margin-top :25rpx; margin-bottom: 25rpx;">
							<view>
								<text>订单类型：{{serviceTypeList[item.orderType].dictLabel}}</text>
							</view>
							
							<view>
								<text>客户姓名：{{item.userName}}</text>
							</view>
							<view v-if="item.subscribeDate">
								<text>服务时间：{{item.subscribeDate}}</text>
							</view>
							<view v-else>
								<text>服务时间：未知</text>
							</view>
							<!-- <text style="float: left;">{{item.createBy}}</text>
							<text class="publicTime">{{item.subscribeDate}}</text> -->
						</view>
						<view class="devideline"></view>
						<view>
							<button class="btn_order">订单详情</button>
							<button v-if="item.isEval != 'Y'" class="btn_calculate" @click="evaluate(item.id)">订单评价</button>
							<button v-if="item.status != 2" class="btn_cancel" type="warn">取消订单</button>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	
	import *  as order from "@/api/personCenter/ORDER.js";
	import *  as data from "@/api/system/dict/data.js";
	import *  as newTeam from "@/api/source/kjrc/XSCDW.js";
	import *  as newYounger from "@/api/source/kjrc/QNXXTJB.js";
	import *  as enginner from "@/api/source/kjrc/ENGINNER.js";
	import orderTabBar from '@/wxcomponents/tab_bar.vue';
	
	import { codeList } from "@/utils/code";
	import {
		defineComponent
	} from "vue";
	export default {
		components: {
			orderTabBar,
		},
		data() {
			return {
				title: '',
				memberList:[
				],
				currentType:0,
				query:{
					pageNum:'1',
					pageSize:'10',
					userId:''
				},
				serviceTypeList:[],
				statusList:[],
				tabList: [
					{
							status: '',
							title: '全部'
					},
					{
						status: '1',
						title: '进行中'
					},
					{
					  status: '2',
					  title: '已完成'
					},
					{
					  status: '3',
					  title: '已取消'
					}
				],
				// 当前选择tab项
				currentIndex: 0,
				// 当前查询状态
				currentStatus: '',
				total:0
			}
		},
		onLoad(option) {
			this.getData()
			this.getUser()
			this.getOrderList()
			uni.showLoading({})
		},
		methods:{
			// tab切换
			clickTabBar(index, status) {
			  this.currentIndex = index
			  this.currentStatus = status
			  this.orderList = [];
			  this.getOrderList()
			},
			getData(){
				data.getDicts("bus_order_service_type").then((response) => {
					this.serviceTypeList = response.data;
				});
				data.getDicts("bus_order_status").then((response) => {
					this.statusList = response.data;
				});
			},
			getUser(){
				const value = uni.getStorageSync('userInfo')
				this.query.userId = value.login_user.member.id
			},
			getOrderList(query){
				order.listORDER(this.query).then((res)=>{
					res.rows.forEach((v)=>{
						this.memberList.push(v)
					})
					this.total = res.total
					uni.hideLoading({})
				})
			},
			evaluate(id){
				uni.navigateTo({
					url:'/subpages/pages/evaluate/evaluate?orderId='+id
				})
			},
			// 更新order
			updateOrderInfo(index) {
				let _this = this
				this.pageNum = 1
				this.memberList = []
				_this.getOrderList()
			},
			// 滑到底部 加载更多
			scrollToLower() {
				console.log("数据量"+this.memberList.length+"总数"+this.total)
				if(this.memberList.length < this.total){
					this.pageNum = this.pageNum + 1
					this.getOrderList();
				}else{
					uni.showToast({
						icon:'none',
						title:'暂无更多数据！'
					})
				}
			},
		}
	}
</script>

<style>
	.main-container{
		height: 100vh;
		width: 100vw;
		background-color: #e1e1e1;
		padding-top: 10rpx;
	}
	
	.tab-bar {
		display: block;
		width: 95%;
		border-radius: 15rpx;
		position: fixed;
		left: 2.5%;
		top: 1.5%;
		z-index: 10;
	}
	
	.member_lsit{
		height: fit-content;
		width: 100%;
		background-color: #e1e1e1;
		margin-top: 17%; 
/* 		position: fixed; */
		z-index: 1;
	}
	
	.video_item {
		height: 380rpx;
		width: 95%;
		margin: 15rpx auto;
		border-radius: 10rpx;
		background-color: #fff;
		box-shadow: 5rpx 0rpx 10rpx #e3e3e3;
	}
	
	
	.video_content {
		width: 100%;
		height: 140rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;
	}
	
	.video_title {
		display: -webkit-box;
		font-size: 33rpx;
		font-weight: 700;
		margin-top: 15rpx;
		white-space: nowrap;
		overflow: hidden;
		white-space: nowrap;
		text-overflow:ellipsis;
		-webkit-box-orient: vertical; /*排列方式*/ 
		-webkit-line-clamp: 1; /*显示文本行数(这里控制多少行隐藏)*/
	}
	
	.publicTime {
		font-size: 23rpx;
		color: #a1a1a1;
		margin-top: 15rpx;
		margin-right: 35rpx;
		float:right;
	}
	
	.devideline {
		float: left; 
		height: 0.3rpx;
		width:95%;
		background-color: #eeeeee;
		margin-top: 15rpx;
		margin-bottom: 15rpx;
	}
	
	.btn_order{
		width: 140rpx;
		height:50rpx;
		background-color: #1e41c4;
		color: #fff;
		font-size: 21rpx;
		float: left;
		margin-left: 3%;
	}
	
	.btn_calculate{
		width: 140rpx;
		height:50rpx;
		background-color: #eaebee;
		color: #46505a;
		font-size: 21rpx;
		margin-left: 15%;
		float: left;
	}
	
	.btn_cancel{
		width: 140rpx;
		height:50rpx;
		background-color: #a90f16;
		color: #fff;
		font-size: 21rpx;
		margin-left: 15%;
		float: left;
	}
</style>